<template>
  <div>
    <div class="background">
      <img class="img" src="../img/qingdao.png" alt="" />
      <div class="form">
        <el-card>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              ><h1 style="font-size: 24px; padding-left: 30px">
                找回密码
              </h1></el-form-item
            >

            <el-form-item required label="邮箱" prop="uemail">
              <el-input v-model="submitForm.uemail"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button plain type="warning" @click="onSubmit"
                >通过邮箱找回</el-button
              >
              <el-button plain type="primary" @click="resetForm"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
    <!-- <el-footer style="background-color: #f5f5f6; display: flex">
      <div
        style="
          width: 20%;
          height: 90px;
          align-self: center;
        "
      >
        <p style="text-align: center; margin-top: 28px">
          <a
            style="
              color: #545c64;
              font-size: 26px;
              font-weight: bold;
              text-decoration: none;
            "
            href="#/"
            >泊寓</a
          >
        </p>
      </div>
      <div
        style="
          width: 50%;
          height: 90px;
          align-self: center;
          margin-left: 3%;
        "
      >
        <p style="font-size: 13px; text-align: center; margin-top: 35px">
          <img src="../img/pl.png" style="width: 12px" /> 鲁公网安备
          31010402000253号 | 鲁ICP备17003747号
        </p>
      </div>
      <div
        style="
          width: 20%;
          height: 90px;
          align-self: center;
          margin-left: 3%;
        "
      >
        <p style="font-size: 14px; text-align: center; margin-top: 35px">
          <i class="el-icon-phone-outline">010-6088-8888</i>
        </p>
      </div>
    </el-footer> -->
  </div>
</template>
<script >
import {sendEmail} from "@/network/user"
export default {
  data() {
    return {
      submitForm: {
        uemail: "",
        rules: {
          uemail: [
            { required: true, message: "请输入邮箱地址", trigger: "blur" },
            {
              type: "email",
              message: "请输入正确的邮箱地址",
              trigger: ["blur", "change"],
            },
          ],
        },
      },
    };
  },
  methods: {
    onSubmit(){
      console.log(this.submitForm);
      sendEmail(this.submitForm).then((res) => {
        // if (res.status) {
          this.$message({
            message: "恭喜你，" + res.msg,
            type: "success",
          });
        this.$router.push("/rebackpwd2");
        // }else{
        //   this.$message.error(res.msg);
        // }
      })
    },
    resetForm(){

      this.$router.push("/");
    }
  },
};
</script>

<style>
.background {
  position: relative;

  /* display: inline-block; */
  z-index: 1;
}
.img {
  width: 100%;
  height: 80%;
  opacity: 0.5;
}
.form {
  margin-left: 30%;
  margin-bottom: 20%;
  position: absolute;
  bottom: 0;
  color: #fff;
  opacity: 1;
  z-index: 999;
}
.el-card__body {
  padding-left: 0px;
  padding-right: 60px;
  padding-top: 30px;
}
h1 {
  color: cadetblue;
}
</style>